<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>文章内容页-荔枝博客</title>
<link rel="icon" th:href="@{/blog/images/favicon.ico}" type="image/ico">
<meta name="keywords" content="blog" />
<meta name="description" content="blog" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css">
<link th:href="@{/blog/css/m.css}" rel="stylesheet">
<link th:href="@{/blog/css/base_info.css}" rel="stylesheet">

<!--[endif]-->
  <style>
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
    }

    @media (max-width: 767px) {
      .markdown-body {
        padding: 15px;
      }
    }

  </style>
</head>
<body>
<header th:replace="blog/header::header-fragment"></header>
<!--top end-->
<article>
  <!--lbox begin-->
  <div class="lbox" >
    <div class="markdown-body whitebg animated fadeIn" >
      <h1 class="con_tilte" th:text="${blog.title}">个人博客，属于我的小世界！</h1>
      <p class="bloginfo"><i class="avatar"><img th:src="@{${blog.user.avatar}}"></i><span th:text="${blog.user.nickname}"></span><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span><span>【<a href="/" th:text="${blog.type.name}"></a>】</span><span th:text="${blog.views} + 人已围观"></span></p>
      <p class="con_info"><b>简介:</b><span th:text="${blog.description}"></span></p>
      <div class="con_text toc-content" data-toc="#toc" th:utext="${blog.content}"></div>
        <p><span class="diggit" th:if="${blog.appreciation}">很赞哦！ (未开通)</span></p>
    </div>
      <div th:if="${blog.shareStatement}" class="whitebg gbook">
      <h2 class="htitle">版权说明</h2>
           <p>
               版权属于:
               <a href="https://www.zealx.top/">荔枝博客</a>
           </p>
           <p>
               更新时间:
               <a href="https://www.zealx.top/">[[${#dates.format(blog.updateTime,'yyyy-MM-dd')}]]</a>
           </p>
           <p>
               原文地址:
               <a th:href="@{/blog/{id}(id=${blog.id})}">[[${#httpServletRequest.getRequestURL()}]]</a>
           </p>
           <p>
               转载时必须以链接形式注明原始出处及本声明。
           </p>
    </div>
      <div class="whitebg gbook">
      <h2 class="htitle">文章评论</h2>
      <p>即将开通</p>
      <ul>
      </ul>
    </div>
  </div>
  <!--lbox end-->
   <div class="rbox">
       <div th:fragment="sider-fragment">
           <div class="whitebg notice">
               <h2 class="htitle">网站公告</h2>
               <ul>
                   <li th:each="notice : ${session.blogNotice}"><a th:href="@{/blog/{id}(id=${notice.id})}">[[${notice.title}]]</a></li>
               </ul>
           </div>
           <div id="toc" class="whitebg paihang toc-auto">
               <h2 class="htitle">目录</h2>
               <ol class="toc"></ol>
           </div>
       </div>
   </div>
</article>
<!--页脚-->
<footer th:replace="blog/footer::footer-fragment"></footer>

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.js"></script>
<script th:src="@{/blog/js/comm.js}"></script>
<!--[if lt IE 9]-->
<script th:src="@{/blog/js/modernizr.js}"></script>
<script>
    /*鼠标特效 */
    /*这个方法用来随机一个十六进制颜色代码，让每一次点击浮动文字的杨色不同*/
    function co() {
        let colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
        let colorArray = colorElements.split(",");
        let color = "#";
        for (let i = 0; i < 6; i++) {
            color += colorArray[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    let a_idx = 0;
    $(document).ready(function($) {
        $("body").click(function(e) {
            /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
            let a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善","点个赞呗"];
            let $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            let x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index" : 999999,
                "top" : y - 20,
                "left" : x,
                "position" : "absolute",
                "font-weight" : "bold",
                "color" : co()
            });
            $("body").append($i);
            $i.animate({
                    "top" : y - 180,
                    "opacity" : 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
        positionFixedSelector: '.toc-auto',
        positionFixedClass: 'is-position-fixed',
        fixedSidebarOffset: 'auto',
    });
</script>
</body>
</html>
